<template>
    <div>
        <div>
            <span class="item3">
                <span class="limit_search_word1">服务中心名称：</span>
                <span class="item3_input"><el-input></el-input></span>
            </span>
            <span class="item3">
                <span class="limit_search_word1">服务中心编号：</span>
                <span class="item3_input"><el-input></el-input></span>
            </span>
            <span class="item3">
                <span class="limit_search_word1">云商姓名：</span>
                <span class="item3_input"><el-input></el-input></span>
            </span>
            <span class="item3">
                <span class="limit_search_word1">云商编号：</span>
                <span class="item3_input"><el-input></el-input></span>
            </span>
        </div>
        <div style="margin-top:20px">
            <span class="limit_search_word1">日期：</span>
            <el-date-picker
                v-model="month1"
                type="month"
                placeholder="选择月">
            </el-date-picker>
            至
            <el-date-picker
                v-model="month2"
                type="month"
                placeholder="选择月">
            </el-date-picker>
        </div>
        <div style="margin-top:20px">
            <span class="limit_search_word1">服务中心总平均收入：</span>
            <span class="limit_search_input"><el-input></el-input></span>
            至
            <span class="limit_search_input"><el-input></el-input></span>
        </div>
        <div style="margin-top:20px">
            <span class="limit_search_word1">个人总平均收入：</span>
            <span class="limit_search_input"><el-input></el-input></span>
            至
            <span class="limit_search_input"><el-input></el-input></span>
        </div>
        <div>
            <el-button type="primary" style="margin-left:300px;margin-top:20px; margin-bottom:20px;" @click="isShowTable = true">查询</el-button>
        </div>
        <div v-show="isShowTable">
            <el-table
                ref="multipleTable"
                :data="tableData3"
                tooltip-effect="dark"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange">
                <el-table-column
                type="selection"
                width="55">
                </el-table-column>
                <el-table-column
                prop="a1"
                label="日期">
                </el-table-column>
                <el-table-column
                prop="a2"
                label="网点编号">
                </el-table-column>
                <el-table-column
                prop="a3"
                label="网点类型">
                </el-table-column>
                <el-table-column
                prop="a4"
                label="负责人卡号">
                </el-table-column>
                <el-table-column
                prop="a5"
                label="云商姓名">
                </el-table-column>
                <el-table-column
                prop="a6"
                label="是否分店">
                </el-table-column>
                <el-table-column
                prop="a7"
                label="总店的分店号">
                </el-table-column>
                <el-table-column
                prop="a8"
                label="风险保障金">
                </el-table-column>
                <el-table-column
                prop="a9"
                label="云商押货最大可汇押货额度">
                </el-table-column>
                <el-table-column
                prop="a10"
                label="云商押货累计汇款金额">
                </el-table-column>
                <el-table-column
                prop="a11"
                label="顾客完美钱包信誉额">
                </el-table-column>
                <el-table-column
                prop="a12"
                label="顾客完美钱包剩余金额">
                </el-table-column>
                <el-table-column
                prop="a13"
                label="单品信誉额">
                </el-table-column>
                <el-table-column
                prop="a14"
                label="单品剩余信誉额">
                </el-table-column>
                <el-table-column
                prop="a15"
                label="近一年年均零售额">
                </el-table-column>
                <el-table-column
                prop="a16"
                label="近一年月均配送服务费">
                </el-table-column>
                <el-table-column
                prop="a17"
                label="近一年月均个人收入">
                </el-table-column>
                <el-table-column
                prop="a18"
                label="近一年月均总收入">
                </el-table-column>
            </el-table>
            <el-button type="primary" @click="dialogTableVisible = true">调整</el-button>
        </div>
        <el-dialog title="额度设置" :visible.sync="dialogTableVisible">
            <el-tabs v-model="activeName">
                <el-tab-pane label="初始额度设置" name="first">初始额度设置</el-tab-pane>
                <el-tab-pane label="压货额度调整设置" name="second">压货额度调整设置</el-tab-pane>
                <el-tab-pane label="红酒额度调整设置" name="third">红酒额度调整设置</el-tab-pane>
            </el-tabs>       
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return {
            dialogTableVisible:false,
            isShowTable:false,
            activeName:"first",
            month1:"",
            month2:"",
            tableData3: [
                {
                    a1:"yyyy-mm-dd",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                    a16:"xxx",
                    a17:"xxx",
                    a18:"xxx",
                },
                {
                    a1:"yyyy-mm-dd",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                    a16:"xxx",
                    a17:"xxx",
                    a18:"xxx",
                },
                {
                    a1:"yyyy-mm-dd",
                    a2:"xxx",
                    a3:"xxx",
                    a4:"xxx",
                    a5:"xxx",
                    a6:"xxx",
                    a7:"xxx",
                    a8:"xxx",
                    a9:"xxx",
                    a10:"xxx",
                    a11:"xxx",
                    a12:"xxx",
                    a13:"xxx",
                    a14:"xxx",
                    a15:"xxx",
                    a16:"xxx",
                    a17:"xxx",
                    a18:"xxx",
                },
            ],
            multipleSelection: []
        }
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
}
</script>
<style>
.limit_search_word1{
    display: inline-block;
    width:175px;
    color:#5b85aa;
}
.limit_search_input{
    display: inline-block;
    width:220px;
}
</style>


